.box {
    width: 200px;
    height: 200px;
    /* 所有的元素默认盒子类型都是inline */
    /* display: block; */
    /* display: inline; */
    /* 即可以设置宽高，也可以多个元素在一行显示 */
    display: inline-block;
    /* display: flex; */
    /*li*/
    /* display: list-item; */
    /*table*/
    /* display: table-cell; */
    background-color: palegreen;
    /* 隐藏盒子 */
    display: none;
}


span {
    display: inline-block;
    width: 100px;
    height: 100px;
    color: red;
    background-color: palegoldenrod;
}

/* 每个元素都可以看做一个矩形盒子 */

.box2 {
    width: 200px;
    height: 200px;
    background-color: paleturquoise;

    /* 激活BFC */
    overflow: hidden;

}

h1 {
    transition: 2s;
}

.box2:hover>h1 {
    /* display: none; */
    /* 0~1 */
    /* opacity: 0; */
}

/* 爱恨原则 love  hate
lv
*/
/* 未访问 */
/* a:link {
    color: green;
} */
/* 访问后 */
/* a:visited{
    color: gray;
} */
/* 鼠标悬停 */
/* a:hover{
    color: red;
} */
/* 点击时 */
/* a:active{
    color: blue;
} */


.box3 {
    color: peru;
    /* background-color: red; */
    /* 不生成盒子，不占据空间 */
    /* display: none; */
    /* 隐藏盒子，保留空间 */
    /* visibility: hidden; */
    /* ie盒子 */
    /* box-sizing: border-box; */
    /* content 内容 */
    width: 250px;
    height: 200px;
    /* padding */
    /* 四周 */
    /* padding: 50px; */
    /* 上下  左右 */
    /* padding: 30px 50px; */
    /* 上 左右 下 */
    /* padding: 10px 20px 30px; */
    /* 上右下左 */
    padding: 10px 20px 30px 40px;

    /* top bottom right left */
    /* padding-left: 50px; */

    /* border 边框 */
    /* 样式 ： solid 实线 dashed 线虚线  dotted 点虚线  double 双实线*/
    /* border: 3px dotted red; */
    /* 双实线 厚度5px */
    /* border: double 5px; */
    /* 边框厚度不一 */
    /* border-left: 1px solid;
    border-right: 2px solid;
    border-top: 3px solid;
    border-bottom: 4px solid; */
    border-color: blue;
    border-style: dotted;
    /*必须写*/
    border-width: 10px;

    /* 外边距 */
    margin-left: auto;
    margin-right: auto;
    margin: 100px auto;
    margin: auto;
}

/* 画三角形 */

.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 10px 10px;
    border-color: transparent transparent transparent palevioletred;
}


.box4 {
    width: 300px;
    height: 250px;
    background-color: peachpuff;
    border: 3px solid red;
}

.box4:hover {
    /* border-bottom: 0; */
    border-bottom: none;
}

.box5 {
    width: 300px;
    height: 400px;
    border: 2px solid;
    margin: auto;
    position: relative;
    top: 0px;
    transition: 1s;
}

.box5:hover {
    position: relative;
    top: -5px;
    /* transform: translateY(-5px); */
    box-shadow: 0px 20px 20px 20px crimson;
}


.parent {
    width: 400px;
    height: 400px;
    border: 2px solid;
    /* 创建弹性布局 
    所有子元素默认在一行显示
    即使宽度超过容器宽度也不会换行
    */
    display: flex;
    /* 换行 */
    flex-wrap: wrap;
    /* 主轴 默认水平向右*/
    justify-content: flex-start;
    /* justify-content: flex-end;
    justify-content: center;
    justify-content: space-evenly; */
    /* 交叉轴 默认垂直向下*/
    /* align-items: baseline; */

    /* 主轴方向 */
    /* flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse; */
}

.parent>div {
    width: 50px;
    height: 50px;
    /* border: 2px solid;
    box-sizing: border-box; */
}

.item1 {
    background-color: aqua;
    font-size: 20px;
    flex-grow: 1;
}

.item2 {
    font-size: 40px;
    background-color: rgb(0, 255, 64);
    flex-grow: 1;
}

.item3 {
    font-size: 30px;
    background-color: rgb(55, 0, 255);
}

.item4 {
    font-size: 12px;
    background-color: rgb(255, 0, 242);
}

.item5 {
    background-color: rgb(229, 255, 0);
}


.container {
    margin: 40px;
    width: 1226px;
    height: 640px;
    border: 2px solid;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;

}

.container>div {
    width: 234px;
    height: 50%;
    border: 2px solid red;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

header {
    margin-bottom: 200px;
    width: 100%;
    height: 40px;
    background-color: black;
    /* padding: 0 100px; */
}

nav {
    width: 1226px;
    height: 40px;
    background-color: pink;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-right: 1px solid #fff;
    padding: 0 10px;
    position: relative;
}

nav>section>a:last-child {
    border-right: 0;
}


a>span{
    width: 100px;
    height: 0px;
    background-color: yellowgreen;
    position: absolute;
    top: 26px;
    left: -20px;
    transition: 1s;
}

a:hover>span{
    height: 150px;
}

